<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>{{ username }}-->{{ user[1] }}</title>

<!-- Favicons -->
<link href="../../../static/assets/img/tubiao.png" rel="icon">

<!-- Vendor CSS Files -->
<link href="../../static/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../../static/assets/vendor/icofont/icofont.min.css" rel="stylesheet">
<link href="../../static/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="../../static/assets/vendor/animate.css/animate.min.css" rel="stylesheet">
<link href="../../static/assets/vendor/venobox/venobox.css" rel="stylesheet">
<link href="../../static/assets/vendor/aos/aos.css" rel="stylesheet">

<!-- Template Main CSS File -->
<link href="../../static/assets/css/style.css" rel="stylesheet">

<style type="text/css">
    body,td {
        scrollbar-face-color: #FFD788;
        scrollbar-highlight-color: #FFD788;
        scrollbar-3dlight-color: #FFD788;
        scrollbar-darkshadow-color: #FFD788;
        scrollbar-shadow-color: #FFAA0B;
        scrollbar-arrow-color: #FFD788;
        scrollbar-track-color: #FFD788;
        font-size: 8pt;
        font-family: Comic Sans MS, Verdana;
        COLOR: #F39729
    }

    input[type="submit"],
    .button {
        width: 100%;
        padding: 10px;
        background-color: #007bff;
        border: none;
        border-radius: 5px;
        color: #fff;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .button:hover {
        background-color: #0056b3;
    }

    A:link,
    A:visited,
    A:active {
        color: #F39729;
        text-decoration: none;
    }

    A:hover {
        color: #FFD788;
        text-decoration: none;
    }

    a {
        cursor: crosshair;
    }
</style>
</head>

<body bgcolor="#FFD788" topmargin="5">


<!-- ======= Header ======= -->

<div align="center">
    <table width="550" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td height="700">
                <table width="550" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td height="204" background="../../static/assets/img/top.gif">&nbsp;</td>
                    </tr>
                    <tr>
                        <td height="556" valign="top" background="../../static/assets/img/bg.gif">
                            <table width="550" height="556" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td height="541" valign="top">
                                        <div align="center">
                                            <img src="../{{ user[8] }}" style="width: 150px;height: 150px;border-radius: 50%;">
                                            <h1>姓名: {{ user[1] }}</h1>
                                            <h3>关注: {{ count[0][0][0] }}&nbsp;&nbsp;&nbsp;&nbsp;
                                                粉丝: {{ count[1][0][0] }}&nbsp;&nbsp;&nbsp;&nbsp;
                                                好友: {{ count[2][0][0] }}
                                            </h3>
                                            <h2>性别: {{ user[3] }}</h2>
                                            <h3>年龄: {{ user[4] }}</h3>
                                            <h2>签名: {{ user[5] }}</h2>
                                            <h2>地址: {{ user[6] }}</h2>
                                            <h2>爱好: {{ user[7] }}</h2>
                                            <!-- 添加按钮 -->
                                            {% if ifFollower %}
                                                <!-- 如果已经关注，则显示取消关注按钮 -->
                                                <button class="button" onclick="cancelFollow()">取消关注</button><br><br>
                                            {% else %}
                                                <!-- 如果未关注，则显示关注按钮 -->
                                                <button class="button" onclick="addFriend()">关注</button><br><br>
                                            {% endif %}
                                            <button class="button" onclick="privateChat()">私聊</button>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td height="40" background="../../static/assets/img/bottom.gif">&nbsp;</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>
<div align="left"></div>

<!-- 您的其他内容 -->

<!-- 按钮点击事件的 JavaScript 代码 -->
<script>
    // 获取要添加好友的用户ID或其他必要的数据
    var friendName = '{{ user[1] }}';
    function addFriend() {
        // 发送Ajax请求
        fetch('/add_friend/{{ username }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ friendName: friendName })
        })
        .then(response => {
            if (response.ok) {
                return response.json();
            }
            throw new Error('添加好友请求失败');
        })
        .then(data => {
            alert('好友添加成功！');
            window.location.reload();
        })
        .catch(error => {
            console.error('发生错误:', error);
            alert('添加好友失败，请稍后重试！');
        });
    }

    // 取消关注的函数
    function cancelFollow() {
        // 发送取消关注请求
        fetch('/cancel_follow/{{ username }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ friendName: friendName })
        })
        .then(response => {
            if (response.ok) {
                return response.json();
            }
            throw new Error('取消关注请求失败');
        })
        .then(data => {
            // 刷新页面或更新页面状态等
            alert('已取消关注！');
            window.location.reload();
        })
        .catch(error => {
            console.error('发生错误:', error);
            alert('取消关注失败，请稍后重试！');
        });
    }

    function privateChat() {
        // 页面跳转到 chat 页面，并将要私聊的用户信息作为参数传递
        window.location.href = '/chat/{{ username }}?friend=' + friendName;
    }

</script>

</body>
</html>
